<template>
  <div>
    <div ref="header">
      <ul style="padding-bottom: 5px;display: flex; justify-content: space-between; list-style: none">
        <li>
          <el-button @click="addNode" ref="aasdadas">添加新节点</el-button>
        </li>
        <li>
          <el-button @click="toggleFullScreen">全屏</el-button>
        </li>
      </ul>
    </div>
    <div class="trag_area" ref="tragArea" @contextmenu="openContextMenu">
<!--      <canvas class="myCanvas" :height="canvars.h" :width="canvars.w" ref="canvasclass" @contextmenu="openContextMenu">-->
<!--      </canvas>-->
      <trag-item v-for="(item, index) in items" :data-item="index" :scrollFun="scrollFun"
                 :itemPosition="{index: 1, total: 1}"
                 :dragData.sync="item" :key="index" :type="item.type" @dblclick.native="tragDbClick(item)">
        <div slot="content">
<!--          {{'标题'}}-->
        </div>
      </trag-item>
<!--      <vuedraggable>-->
<!--        <transition-group>-->
<!--          <div v-for="item in 10" :key="item" class="item">-->
<!--            <p>{{item}}</p>-->
<!--          </div>-->
<!--        </transition-group>-->
<!--      </vuedraggable>-->
      <div v-mouseDrag="{ cb: dragFun, isDrag: isRubber, ref: $refs.tragArea }" class="rubberclass" v-if="isRubber"></div>
    </div>
    <div v-show="contextMenuVisible">
      <ul :style="{left: left+'px', top: top+'px'}" class="contextmenu">
        <li><el-button type="text" size="mini" @click="addNode()">新增节点</el-button></li>
        <li><el-button type="text" size="mini" @click="addNode('horizontal')">新增水平线条</el-button></li>
        <li><el-button type="text" size="mini" @click="addNode('vertical')">新增垂直线条</el-button></li>
<!--        <li><el-button type="text" size="mini">新增文字</el-button></li>-->
<!--        <li><el-button type="text" size="mini" @click="rubberFun">橡皮檫</el-button></li>-->
        <li><el-button type="text" size="mini" @click="deleteNode" v-if="deleteIndex !== -1">删除</el-button></li>
      </ul>
    </div>
    <drag-dialog :visible.sync="dragEditVisible" :title="dragEditTitle"></drag-dialog>
  </div>
</template>

<script>
import tragItem from "./tragItem";
import { drag, mouseDrag, Canvars } from "./drag_canvers";
import dragDialog from "./dragDialog";
// import vuedraggable from 'vuedraggable'

export default {
  name: "dragDemand",
  components: {
    tragItem,
    dragDialog,
    // vuedraggable
  },
  directives: {
    drag: drag,
    mouseDrag: mouseDrag
  },
  data () {
    return {
      dragEditVisible: false,
      dragEditTitle: '',
      canvarsD: null,
      items: [
        {
          x: 0,
          y: 0
        }
      ],
      contextMenuVisible: false,
      left: 0,
      top: 0,
      clickXy: {},
      canvars: {
        w: '100px',
        h: '100px'
      },
      isRubber: false,
      deleteIndex: -1
    }
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.initCanvasWH()
  //   })
  // },
  methods: {
    scrollFun (x, y) {
      return {
        x, y
      }
    },
    // 弹窗双击
    tragDbClick (item) {
      if (!item.type) {
        console.log('click')
        this.dragEditTitle = '编辑栏'
        this.dragEditVisible = true
      }
    },
    initCanvasWH () {
      // this.canvars.h = this.$refs.tragArea.clientHeight
      // this.canvars.w = this.$refs.tragArea.clientWidth - 20
      this.$nextTick(() => {
        // this.canvarsLine()
        // console.log(this.$refs.header);
        // console.log(this.$refs.aasdadas);
      })
    },
    dragFun (el, x, y) {
      el.style.left =  `${x}px`
      el.style.top =  `${y}px`
    },
    rubberFun () {
      this.contextMenuVisible = false
      this.isRubber = !this.isRubber
      // if (this.$refs.canvasclass.style.cursor === 'none') {
      //   this.$refs.canvasclass.style.cursor = ""
      //   this.canvarsD.canvas.mouseDownFun(0)
      // } else {
      //   this.$refs.canvasclass.style.cursor = "none"
      //   this.canvarsD.canvas.mouseDownFun(1)
      // }
    },
    toggleFullScreen() {
      let document = document.getElementsByClassName('trag_area')[0]// this.$refs.tragArea
      console.log(document)
      if (!document.fullscreenElement && // alternative standard method
          !document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods
        if (document.documentElement.requestFullscreen) {
          document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
          document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    },
    openContextMenu(e, index) {
      console.log(e, index)
      if (e.target.className === 'trag_area' || e.target.className.indexOf('var') >= 0) {
        this.deleteIndex = -1
        e.preventDefault() //防止默认菜单弹出
        this.left = e.offsetX
        let ht = this.$refs.header
        this.top = e.offsetY + ht.clientHeight
        this.contextMenuVisible = true
        this.$refs.tragArea.addEventListener('click', this.addClick)
        this.clickXy = { x: this.left, y: e.offsetY }
        if (e.target.className === 'var') {
          console.log(e.target, e.target.dataItem)
          // this.deleteIndex = index
        }
      }
    },
    // 监听点击
    addClick () {
      this.contextMenuVisible = false
      this.$refs.tragArea.removeEventListener('click', this.addClick)
    },
    // 添加新节点
    addNode (type) {
      this.contextMenuVisible = false
      this.clickXy.type = type
      this.items.push(this.clickXy)
    },
    handleTags () {
    },
    deleteNode (item, index) {
      this.items.splice(index, 1)
    }
    // 手画线条
    // canvarsLine () {
    //   let cv = document.getElementsByClassName('myCanvas')[0]
    //   this.canvarsD = new Canvars(cv)
    //   // this.canvarsD.initialization()
    // }
  }
}
</script>

<style scoped>
.rubberclass {
  top: 0;
  left: 0;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: indianred;
}
.trag_area {
  position: relative;
  height: 300px;
  overflow: auto;
  border: 1px solid #EEEEEE;
}
.contextmenu {
  width: 100px;
  margin: 0;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.contextmenu li {
  margin: 0;
  padding: 0px 22px;

}
.contextmenu li:hover {
  background: #f2f2f2;
  cursor: pointer;
}
.contextmenu li button{
  color: #2c3e50;
}
</style>